<template>
  <div>
    <div style="margin: 3px;">
      <h1 style="font-size: 30px;text-align: center;">类别信息</h1>
      <el-button style="float: left;"  @click="storageMother" type="primary">月库存量</el-button>
    </div>
    <el-dialog title="库存信息" :visible.sync="dialogVisibleaa" width="49%" >
      <el-table ref="multipleTable" :data="storageList"  style="width: 100%;" >
        <el-table-column  type="index"  width="80">
        </el-table-column>
        <el-table-column prop="typeName" label="物品名称" width="150">
        </el-table-column>
        <el-table-column prop="siteGross" label="物品存储量" width="150">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="150">
        </el-table-column>
        <el-table-column width="180">
          <template slot="header" slot-scope="scope">年月</template>
          <template slot-scope="scope"><span>{{scope.row.month}}</span></template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 类别列表 -->
    <div style="border: 1px silver solid;width: 1100px;height: 500px;margin-top: 42px;">
      <el-table ref="multipleTable" :data="kinds"  style="width: 100%;" >
        <el-table-column  type="index"  width="80">
        </el-table-column>
        <el-table-column prop="typeName" label="物品名称" width="200">
        </el-table-column>
        <el-table-column   label="物品名称" width="150">
          <template slot="header" slot-scope="scope">物品图片</template>
          <template slot-scope="scope"><el-image :src="scope.row.typeImage"></el-image></template>
        </el-table-column>
        <!-- <el-table-column prop="typePrice" sortable label="平台预估单价" width="150">
        </el-table-column> -->
        <el-table-column prop="typePrice" sortable label="实收单价" width="150">
        </el-table-column>
        <el-table-column prop="unit" sortable label="计价单位" width="150">
        </el-table-column>
        <el-table-column label="物品状态" width="150">
          <template slot-scope="scope">
            <span>
              {{scope.row.state==0?"正常":scope.row.state==1?"禁用":"删除"}}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right"  label="操作" width="220">
          <template slot-scope="scope">
            <el-button style="float: left;"  v-if="siteRole==0?true:false"  @click="updateBtn(scope.row)" type="primary">单价修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改弹框 -->
    <el-dialog title="类别信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="typeInfo" :model="typeInfo" label-width="100px">
        <el-form-item label="实收单价">
          <el-input v-model="typeInfo.typePrice"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "SiteKinds",
    data() {
      return {
        dialogVisibleaa:false,
        storageList:[],
        typeInfo:{
          typePrice:'',
          siteKindsPriceId:''
        },
        dialogVisible:false,
        kinds:[],
        siteRole:''
      }
    },
    methods: {

      storageMother(){
        this.dialogVisibleaa = true
        this.$http.post("/platform/storageGrossMonth/showGrossMonth.site").then(resp=>{
          console.log(resp.data.data)
          if(resp.data.code == 200){
            this.storageList = resp.data.data
          }else{
            this.storageList = null
          }
        })
      },

      //确定按钮
      confirm(){
        console.log(this.typeInfo)
        this.$http.post("/site/siteKindsPrice/siteUpdate.site",this.typeInfo).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.typeInfo.typePrice = ''
            this.typeInfo.siteKindsPriceId = ''
            this.showSiteKinds()
            this.dialogVisible = false
          }
        })
      },

      //取消按按钮
      cancel(){
        this.typeInfo.typePrice = ''
         this.dialogVisible = false
      },

      //修改按钮
      updateBtn(row){
        this.typeInfo.typePrice = row.typePrice
        this.typeInfo.siteKindsPriceId = row.id
        let form = this.typeInfo
        // 深拷贝处理
        let str=JSON.stringify(form)
        let updateForm=JSON.parse(str)
        this.dialogVisible = true
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //展示站点类别信息
      showSiteKinds(){
        this.$http.post("/site/siteKindsPrice/siteSelect.site").then(resp=>{
          if(resp.data.code==200){
            this.kinds = resp.data.data
          }else{
            this.kinds = []
          }

        })
      },

      showSiteAccount(){
       let siteAccount = JSON.parse(localStorage.getItem("siteAccountMessage"))
       this.siteRole = siteAccount.siteRole
      }
    },
    created() {
      this.showSiteKinds()
      this.showSiteAccount()
    }

  }
</script>

<style>
</style>
